/*
This is the css style of the web pages.
*/

/* ############# MAIN PAGES ELEMENTS ######################## */

/*Define body for pages that doen't fit in a frame. Set minimun resolution for the page and no margin or padidng*/
body.noFrame {
    margin:0; 
    padding:0 0%; 
    min-height: 500px;
    min-width: 1024px;
}
                
/*Define top header coloured bar*/

#topHeader {
    width:100%; 
    height: 90px;
    background: #3D8AF7;
    border-bottom-color: #356e94; 
    border-bottom-style: none;
    border-bottom-width: 1px;
}

/*Define left header coloured bar*/
#LeftHeader {
    width: 150px; 
    padding: 0;
    padding-bottom: 30%;
    margin: 0px;
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #3D8AF7 40%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #3D8AF7 40%);

    /* Opera */ 
    background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #3D8AF7 40%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.4, #3D8AF7));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #3D8AF7 40%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to top, #FFFFFF 0%, #3D8AF7 40%);
    float : left;
}

#searchHeader {
    width:100%; 
    height: 48px;
    background: #3D8AF7;
    border-bottom-color: #356e94; 
    border-bottom-style: none;
    border-bottom-width: 1px;
}

#searchGridHeader{   
    margin-left: 20%;
}

#settingsForm{
    margin-left: 15%;
}

#search{
    float:left; 
    display:block;
}

/*Define meteocal logo */
#logo { 
    width: 320px;
    margin: 0px;
    padding-top: 5px; 
    padding-left: 50px;
    background: #3D8AF7;
    font-family: "Comic Sans MS", cursive sans-serif;
    float : left;
}

/*define max size for the central frame*/
#centralFrame {
    border: none;
    width: 82%; 
    height : 500px;   
    
}

/*define padding for the button lists*/
ul.buttonList {
    list-style-type: none;
    margin: 0;
    padding-left: 10px;
    padding-top:  60px;
}

/*define button style*/

.leftBarButton {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-size: 17px;
  padding: 9px 20px 10px 20px;
  width:  130px;
  text-decoration: none;
}



/* ############# INDEX PAGE(guest home) ######################## */


/*Define various div block positions */

div.loginForm {     
    padding-top: 20px;
    padding-left: 48%;
    background-color:#3D8AF7; 
} 

div.rights  {     
    padding-left: 64%;
} 

div.guestFrame {     
    padding-top: 2%;
    padding-left: 25%;      
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #EEEEEE 30%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #EEEEEE 90%);

    /* Opera */ 
    background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #EEEEEE 90%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.9, #EEEEEE));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #EEEEEE 90%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to top, #FFFFFF 0%, #EEEEEE 90%);
} 

/*In this section are define singular elements throught the id model.*/

#passwordLabel {
    padding-left: 177px;
}

.register {
    position: relative;
    left : 24%;
    border : none;
}


/* ############# USER MAIN PAGE ELEMENTS ######################## */

div.logoutForm {     
    padding-top: 20px;
    padding-left: 90%;
    background-color:#3D8AF7;    
} 

#userCalendar {  
    margin: 0px;
    padding-top: 10px; 
    padding-left: 20px;
    background: #3D8AF7;
    font-family: "Comic Sans MS", cursive sans-serif;
    float : left;
    margin-left: 52px;
    margin-top: 6px
}

.schedule {
    width: 85%;
}

.eventButton {
    width : 160px;
}

/* ############# ADD EVENT ELEMENTS ######################## */

#eventForm {     
    float:left; 
    display:block; 
    width:500px; 
    height:500px; 
    background-color: #FFFFFF; 
    text-align: center;
}

#rightEventForm { 
    float:left;
    display:block; 
    width:170px; 
    height:500px; 
    background-color:#FFFFFF;    
    text-align: center;
}

#badConditions {     
    float:left; 
    display:block; 
    width:450px; 
    height:40px;  
    text-align: center;
    padding-top: 6px;
}

#badConditionsButton { 
    float:left;
    display:block;
    background-color:#FFFFFF;    
    text-align: left;
}

#badConditionsDiv{ 
    width:450px;  
    border:none;
    background-color: #FFFFFF; 
    text-align: center;
}

#invitationcheck{
   padding-bottom: 18px;
}

#descriptionLabel{
    position:relative;
    bottom: 70px;
}

#notificationForm{    
    float:left; 
    display:block; 
    width:900px; 
    height:600px; 
    background-color: #FFFFFF; 
    text-align: center;
}

.notResize {
    resize: none;
}


/* ### show event ### */
#weatherImage {
    width: 50px;
    height: 50px;
}

.weatherGrid {
    position:relative;
    left:90px;
}

.weatherPreview {
    position:relative;
    right: 20px;
    width: 300px;
    left: 20px;
}

.noBackround {
    border: none;
    resize: none;
    background: #FFFFFF;
    color: black;
}

/* ### schedule event color ### */
.red {
    background: red;
}

.private {
    background: activeborder;
}


.grey {
    background: #999999;
}

.pink {
    background: plum;
}

.blue {
    background: blue;
}

.green {
    background: green;
}

.violet {
    background: violet;
}

.orange {
    background: orange;
}

.brown {
    background: brown;
}

.gold {
    background: gold;
}

